function Pagination(ele, options) {
    // 大盒子
    this.ele = ele

    // 默认参数
    this.default = {
        // 页码信息
        pageInfo: {
            pagenum: 1, // 当前在第几页
            pagesize: 20, // 一页多少条数据
            total: 940, // 总条数
            totalpage: 47, // 总页数
        },
        // 文字信息
        textInfo: {
            first: 'first',
            prev: 'prev',
            list: '',
            next: 'next',
            last: 'last'
        }
    }

    // 全局参数
    this.options = options

    // 赋值全局函数
    this.change = options.change

    // list元素存起来
    this.list = null

    // 初始化函数
    this.init()
}

Pagination.prototype.init = function() {
    this.boxCss()

    this.replaceDefault()

    this.creDiv()

    this.creInp()

    this.crePage()

    this.addEvent()
}

// 替换默认参数
Pagination.prototype.replaceDefault = function() {
    for (let attr in this.options.pageInfo) {
        this.default.pageInfo[attr] = this.options.pageInfo[attr]
    }

    for (let attr in this.options.textInfo) {
        this.default.textInfo[attr] = this.options.textInfo[attr]
    }

}

// box设置样式
Pagination.prototype.boxCss = function() {
    this.setCss(this.ele, {
        width: '1200px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        margin: '20px auto',
    })
}

// 设置css
Pagination.prototype.setCss = function(obj, options) {
    for (let attr in options) {
        // attr => 属性名 width height border
        // options[attr] => 属性值 200px 200px 1px solid #f00
        obj.style[attr] = options[attr]
    }
}

// 生成div
Pagination.prototype.creDiv = function() {
        let options = this.default.textInfo
        for (let attr in options) {
            let oDiv = document.createElement('div')

            oDiv.className = attr
            oDiv.innerHTML = options[attr]

            // 加样式
            // attr === 'list'
            if (attr === 'list') {
                this.list = oDiv
                this.setCss(oDiv, {
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    border: 'none',
                    margin: '0'
                })
            } else {
                this.setCss(oDiv, {
                    border: '1px solid #eee',
                    padding: '6px 10px',
                    borderRadius: '3px',
                    color: '#666',
                    margin: '10px',
                })
            }

            this.ele.appendChild(oDiv)
        }
    }
    // 创建input
Pagination.prototype.creInp = function() {
    var oTxt = document.createElement('input')

    oTxt.value = 1
    oTxt.type = 'text'

    this.setCss(oTxt, {
        width: '50px',
        padding: '8px',
        border: '1px solid #eee',
        outline: 'none'
    })

    this.ele.appendChild(oTxt)

    var oTxt = document.createElement('input')

    oTxt.value = '跳转'
    oTxt.type = 'button'

    this.setCss(oTxt, {
        width: '50px',
        padding: '8px',
        outline: 'none',
        border: 'none',
        background: '#FF6700',
        color: '#fff',
        marginLeft: '10px'
    })

    this.ele.appendChild(oTxt)
}

Pagination.prototype.creP = function(i) {
    var oP = document.createElement('p')

    oP.innerHTML = i

    this.setCss(oP, {
        border: '1px solid #eee',
        padding: '6px 10px',
        borderRadius: '3px',
        color: '#666',
        margin: '10px',
        cursor: 'pointer'
    })

    return oP

}

// 插入页码
Pagination.prototype.crePage = function() {
    // 清空
    this.list.innerHTML = ''
        // 总页数
    let totalpage = this.default.pageInfo.totalpage
        // 当前页
    let pagenum = this.default.pageInfo.pagenum


    // 总页数小于9
    if (totalpage <= 9) {
        for (let i = 1; i <= totalpage; i++) {
            let oP = this.creP(i)

            this.list.appendChild(oP)
        }
    } else {
        // 总页数大于9
        // 1 2 3 4 5 ... 99 100
        if (pagenum < 4) {
            for (let i = 1; i <= 5; i++) {
                let oP = this.creP(i)

                this.list.appendChild(oP)
            }

            let oSpan = document.createElement('span')
            oSpan.innerHTML = '...'
            this.list.appendChild(oSpan)

            for (let i = totalpage - 1; i <= totalpage; i++) {
                let oP = this.creP(i)

                this.list.appendChild(oP)
            }
        } else if (pagenum === 4) {
            // 1 2 3 4 5 6 7 ... 99 100
            for (let i = 1; i <= 7; i++) {
                let oP = this.creP(i)

                this.list.appendChild(oP)
            }

            let oSpan = document.createElement('span')
            oSpan.innerHTML = '...'
            this.list.appendChild(oSpan)

            for (let i = totalpage - 1; i <= totalpage; i++) {
                let oP = this.creP(i)

                this.list.appendChild(oP)
            }
        } else if (pagenum === 5) {
            // 1 ... 3 4 5 6 7 ... 99 100

            // for (let i = 1; i <= 1; i++) {
            //     let oP = this.creP(i)

            //     this.list.appendChild(oP)
            // }

            var oSpan = document.createElement('span')
            oSpan.innerHTML = '...'
            this.list.appendChild(oSpan)


            for (let i = pagenum - 2; i <= pagenum + 2; i++) {
                let oP = this.creP(i)

                this.list.appendChild(oP)
            }

            var oSpan = document.createElement('span')
            oSpan.innerHTML = '...'
            this.list.appendChild(oSpan)

            // for (let i = totalpage; i <= totalpage; i++) {
            //     let oP = this.creP(i)

            //     this.list.appendChild(oP)
            // }
        } else if (pagenum > totalpage - 3) {
            // 1 2 ... 96 97 98 99 100
            for (let i = 1; i <= 2; i++) {
                let oP = this.creP(i)

                this.list.appendChild(oP)
            }

            var oSpan = document.createElement('span')
            oSpan.innerHTML = '...'
            this.list.appendChild(oSpan)

            for (let i = totalpage - 4; i <= totalpage; i++) {
                let oP = this.creP(i)

                this.list.appendChild(oP)
            }
        } else if (pagenum === totalpage - 3) {
            // 1 2 ... 94 95 96 97 98 99 100
            for (let i = 1; i <= 2; i++) {
                let oP = this.creP(i)

                this.list.appendChild(oP)
            }

            var oSpan = document.createElement('span')
            oSpan.innerHTML = '...'
            this.list.appendChild(oSpan)

            for (let i = totalpage - 6; i <= totalpage; i++) {
                let oP = this.creP(i)

                this.list.appendChild(oP)
            }
        } else if (pagenum === totalpage - 4) {
            // ... 94 95 96 97 98 ...
            var oSpan = document.createElement('span')
            oSpan.innerHTML = '...'
            this.list.appendChild(oSpan)


            for (let i = pagenum - 2; i <= pagenum + 2; i++) {
                let oP = this.creP(i)

                this.list.appendChild(oP)
            }

            var oSpan = document.createElement('span')
            oSpan.innerHTML = '...'
            this.list.appendChild(oSpan)
        } else {
            // 1 2 ... 78 79 80 81 82 ... 99 100
            for (let i = 1; i <= 2; i++) {
                let oP = this.creP(i)

                this.list.appendChild(oP)
            }

            var oSpan = document.createElement('span')
            oSpan.innerHTML = '...'
            this.list.appendChild(oSpan)


            for (let i = pagenum - 2; i <= pagenum + 2; i++) {
                let oP = this.creP(i)

                this.list.appendChild(oP)
            }

            var oSpan = document.createElement('span')
            oSpan.innerHTML = '...'
            this.list.appendChild(oSpan)

            for (let i = totalpage - 1; i <= totalpage; i++) {
                let oP = this.creP(i)

                this.list.appendChild(oP)
            }
        }
    }

    this.change && this.change(this.default.pageInfo.pagenum)

    var aPage = this.ele.querySelectorAll('p')

    aPage.forEach((ele, index) => {
        if (ele.innerHTML == this.default.pageInfo.pagenum) {
            this.setCss(ele, {
                background: '#FF6700',
                color: '#fff'
            })
        }
    })
}

// 加事件
Pagination.prototype.addEvent = function() {
    // this.default.pageInfo.pagenum=1
    // this.crePage()

    // 获取input txt
    var oTxt = this.ele.querySelector('input[type=text]')

    this.ele.addEventListener('click', (ev) => {
        ev = ev || event
        let src = ev.target || ev.srcElement

        if (src.className === 'first') {
            this.default.pageInfo.pagenum = 1
            this.crePage()
        }

        if (src.className === 'last') {
            this.default.pageInfo.pagenum = this.default.pageInfo.totalpage
            this.crePage()
        }

        if (src.className === 'prev') {
            this.default.pageInfo.pagenum--
                if (this.default.pageInfo.pagenum === 0) {
                    this.default.pageInfo.pagenum = 1
                }
            this.crePage()
        }

        if (src.className === 'next') {
            this.default.pageInfo.pagenum++
                if (this.default.pageInfo.pagenum > this.default.pageInfo.totalpage) {
                    this.default.pageInfo.pagenum = this.default.pageInfo.totalpage
                }
            this.crePage()
        }

        if (src.tagName === 'P') {
            this.default.pageInfo.pagenum = src.innerHTML - 0
            this.crePage()
        }

        if (src.type === 'button') {
            this.default.pageInfo.pagenum = oTxt.value - 0
            this.crePage()
        }

        oTxt.value = this.default.pageInfo.pagenum
    })
}